<template>
  <div class="top-view-box">
    <div class="view" v-for="(item,index) in list" :key="index">
      <div class="top-text" :title="item.title">{{item.title}}</div>
      <div class="top-line" >
        <div :style="'width:'+item.line" :class="{changeBgColor:index%2!=0}"></div>
      </div>
      <div class="top-num" :class="{'item-view-num2':item.num == '库存不足','item-view-num3':item.num == '急需补货'}">{{item.num}}</div>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.top-view-box{
  height: calc(100%);
  width: calc(100%);
  color: #fff;
  font-size: 14px;
  .view{
    display: flex;
    align-items: center;
    height:10%;
    .top-text{
      background: #164A8A;
      // background: linear-gradient(to right, #091E54 0%,#0D3269 30%, #13518A 50%, #0D3269 70%,#091E54 100%);
      background: linear-gradient(to right, rgba(124,178,255,0.00), #13518A 50%, rgba(124,178,255,0.00) 100%);
      border-top: 1px solid #1785D0; /* 上边框 */
      border-bottom: 1px solid #1785D0; /* 下边框 */
      border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, #1785D0 50%, rgba(0,0,0,.1) 100%) 1;
      height: 20px;
      line-height: 20px;
      width: 120px;
      text-align: center;
      white-space: nowrap;       /* 确保文本不会换行 */
      overflow: hidden;          /* 隐藏超出容器的部分 */
      text-overflow: ellipsis;   /* 显示省略号 */
    }
    .top-line{
      flex:1;
      // background: rgba(0,0,0,0.5);
      height:40%;
      border-radius: 10px;
      margin: 0 5px;
      div{
        height: 100%;
        width: 80%;
        background: #fff;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background: linear-gradient(to right, rgba(124,178,255,0.00) 0%, #54eae2 100%);
        // background: linear-gradient(0deg,rgba(124,178,255,0.00), #54eae2);
      }
      .changeBgColor{
        background: linear-gradient(to right, rgba(124,178,255,0.00) 0%, #238aff 100%) ;
        // background: linear-gradient(0deg,rgba(124,178,255,0.00), #238aff);
      }
    }
    .top-num{
      width:80px;
      text-align: right;
      font-size: 12px;
    }
  .item-view-num2{
    color: rgb(255, 126, 24) !important;
    font-weight: bold;
    transform: scale(1.1)
  }
  .item-view-num3{
    color: rgb(255, 66, 66) !important;
    font-weight: bold;
    animation: grow 1s infinite alternate;
  }
  @keyframes grow {
            0% {
              transform: scale(1.1); /* 原始大小 */
            }
            50% {
              transform: scale(1.3); /* 放大到原来的1.5倍 */
            }
            100% {
              transform: scale(1.1); /* 恢复到原始大小 */
            }
          }
  }
}
</style>
